<template>
  <div class="canvas_comp">
    <div class="canvas_comp_top" id="canvas_comp_parallax">
        <div class="layer" data-depth-x="0.1" data-depth-y="1.0">
          <div class="top_title" :class="{top_title_white: ifTopTitleColor}">
            CALORIE
          </div>
        </div>
        <div class="layer" data-depth-x="0.1" data-depth-y="1.0">
          <div class="top_button" v-show="ifTopButtonShow">
            <span class="btItem" :class="{btItemActive: btItemActiveIndex === 0}" @click="btItemClick(0)" @mouseenter="this.btItemActiveIndex = 0" @mouseleave="this.btItemActiveIndex = -1">WELCOME</span>
            <span class="btItem" :class="{btItemActive: btItemActiveIndex === 1}" @click="btItemClick(1)" @mouseenter="this.btItemActiveIndex = 1" @mouseleave="this.btItemActiveIndex = -1">MIMU</span>
            <span class="btItem" :class="{btItemActive: btItemActiveIndex === 2}" @click="btItemClick(2)" @mouseenter="this.btItemActiveIndex = 2" @mouseleave="this.btItemActiveIndex = -1">ABOUT</span>
          </div>
        </div>
    </div>
    <div class="canvas_comp_left" id="canvas_comp_parallax2" ref="canvasCompLeft">
      <div class="layer" data-depth-x="1.2" data-depth-y="0.5">
        <div class="rotate" @click="rotateButton" title="开启自动旋转">
          <div class="rotate_bg"></div>
          <svg class="rotate_svg" t="1649666738421" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4069" width="22" height="22"><path d="M934 296l-111.5 49.6c-10.6 4.7-22.5-3-22.5-14.6v-75c0-35.4-28.7-64-64-64H64c-35.3 0-64 28.6-64 64v512c0 35.3 28.7 64 64 64h672c35.3 0 64-28.7 64-64v-74.9c0-11.6 11.9-19.3 22.5-14.6L934 728c42.3 18.8 90-12.2 90-58.5v-315c0-46.3-47.7-77.3-90-58.5zM503.9 553.6L340.5 648c-7.7 4.5-15.9 6.5-23.9 6.5-25.1 0-48.1-20-48.1-48.1V417.6c0-28 23-48.1 48.1-48.1 8 0 16.2 2 23.9 6.5l163.4 94.4c32 18.5 32 64.7 0 83.2z" p-id="4070"></path><path d="M447.9 512l-115.5 66.6V445.3z" p-id="4071"></path></svg>
        </div>
      </div>
      <div class="layer" data-depth-x="1.2" data-depth-y="0.5">
        <div class="scale" @click="scaleButton" title="开启手动缩放">
          <div class="scale_bg"></div>
          <svg class="scale_svg" t="1649683871254" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3128" width="26" height="26"><path d="M609.52 584.92a35.309 35.309 0 0 1 24.98-10.36c9.37 0 18.36 3.73 24.98 10.36l189.29 189.22-0.07-114.3 0.57-6.35c3.25-17.98 19.7-30.5 37.9-28.85 18.2 1.65 32.12 16.92 32.09 35.2v200.23c-0.05 1.49-0.19 2.97-0.42 4.45l-0.21 1.13c-0.22 1.44-0.55 2.85-0.99 4.24l-0.57 1.62-0.56 1.41a34.163 34.163 0 0 1-7.62 11.36l2.12-2.4-0.14 0.14-0.92 1.06-1.06 1.2-0.57 0.57-0.56 0.57a36.378 36.378 0 0 1-16.23 8.39l-3.53 0.5-4.02 0.35h-199.6l-6.35-0.63c-16.73-3.06-28.9-17.63-28.93-34.64l0.56-6.35c3.07-16.76 17.67-28.93 34.71-28.92l114.29-0.14-189.07-189.1-4.09-4.94c-9.71-14.01-8.01-32.95 4.02-45.02z m-162.06 0c12.06 12.05 13.78 30.99 4.09 45.01l-4.09 4.94-189.15 189.08 114.3 0.14c17.04-0.01 31.65 12.17 34.71 28.92l0.57 6.35c-0.03 17.01-12.19 31.58-28.92 34.64l-6.35 0.63H173.09l-4.23-0.42-3.39-0.49a36.38 36.38 0 0 1-17.36-9.52l-1.06-1.13-0.98-1.13 0.98 1.06-1.97-2.26 0.85 1.06-0.42-0.56a35.137 35.137 0 0 1-3.74-5.64l-1.13-2.68a34.71 34.71 0 0 1-2.11-7.33l-0.28-1.13c-0.21-1.47-0.33-2.96-0.36-4.45V659.78c-0.03-18.28 13.89-33.55 32.09-35.2 18.2-1.65 34.65 10.87 37.9 28.85l0.57 6.35-0.07 114.36 189.29-189.22c13.77-13.77 36.11-13.77 49.88 0h-0.09z m-74.71-471.71l6.35 0.57c16.76 3.06 28.93 17.67 28.92 34.71l-0.63 6.35c-3.07 16.76-17.67 28.93-34.71 28.92l-114.3 0.14 189.15 189.08 4.09 4.94c10.26 15.02 7.42 35.37-6.55 47.01-13.98 11.63-34.51 10.74-47.42-2.07L208.29 233.71l0.07 114.3-0.57 6.35c-3.25 17.98-19.7 30.5-37.9 28.85-18.2-1.65-32.12-16.92-32.09-35.2V147.78c0-1.55 0.14-3.03 0.35-4.51l0.21-1.13c0.24-1.44 0.59-2.85 1.06-4.23a34.97 34.97 0 0 1 8.68-14.39l-2.12 2.4-0.42 0.57 1.55-1.84-0.99 1.06 0.92-0.98 2.26-2.33c3.04-2.73 6.52-4.92 10.3-6.49l2.82-1.06c3.45-1.07 7.04-1.62 10.65-1.62l-3.6 0.14h0.49l1.48-0.14h201.31z m512.91 0l1.41 0.14h0.42c2.43 0.29 4.84 0.79 7.19 1.48l2.82 1.06 2.61 1.2 3.04 1.76c2.09 1.33 4.03 2.89 5.78 4.66l1.13 1.2 0.78 0.98 0.21 0.14 0.49 0.64 2.33 3.17c2.35 3.83 3.98 8.07 4.8 12.49l0.21 1.13c0.21 1.48 0.35 2.96 0.35 4.44v200.37c-0.16 18.13-14.03 33.19-32.08 34.83-18.06 1.64-34.42-10.67-37.83-28.48l-0.57-6.35V233.65L659.54 422.87c-12.9 12.95-33.56 13.91-47.59 2.2-14.04-11.71-16.81-32.2-6.38-47.22l4.02-4.86 189.22-189.08-114.29-0.14c-17.06 0.04-31.71-12.14-34.78-28.92l-0.63-6.35c-0.01-17.04 12.16-31.65 28.93-34.71l6.35-0.57h201.27z m0 0" p-id="3129"></path></svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Parallax from 'parallax-js'

export default {
  name: "canvas_comp",
  data() {
    return {
      btItemActiveIndex: 0, // 判断 btItem 栏按钮选中
    }
  },
  props: {
    ifTopButtonShow: {
      type: Boolean,
      default: true
    },
    ifTopTitleColor: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    let scene = document.getElementById('canvas_comp_parallax');
    let parallax = new Parallax(scene);
    let scene2 = document.getElementById('canvas_comp_parallax2');
    let parallax2 = new Parallax(scene2);

    // 计算
    this.$refs.canvasCompLeft.style.top = window.innerHeight - 260 + "px";
  },
  methods: {
    btItemClick(value) {
      if(value == 0) {
        this.$emit("canvasCompButton", 'welcome');
      } else if (value == 1) {
        this.$emit("canvasCompButton", 'mimu');
      } else if (value == 2) {
        this.$emit("canvasCompButton", 'about');
      }
    },

    rotateButton() {
      this.$emit("canvasCompButton", 0);
      
    },
    scaleButton() {
      this.$emit("canvasCompButton", 1);
    }
  }
}
</script>

<style scoped>
  .canvas_comp {
    caret-color: transparent; /* 去除光标颜色 */
    height: 0; /* 让它只作为父级定位元素 */
  }

  .canvas_comp_top {
    width: 100%;
    height: 100px;
    position: relative;
    animation: move2 2s forwards ease;
  }

  @keyframes move2 {
    from {
      transform: translateY(20px);
    }
    to {
      transform: translateY(0px);
    }
  }

  .layer {
    width: 100%;
    pointer-events: auto;
  }

  .top_title {
    color: #666;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 4px;
    display: inline-block;
    position: absolute;
    top: 32px;
    left: 64px;
    cursor: default;
    transition: 0.8s;
  }

  .top_title_white {
    color: #fff;
  }

  .top_title::after {
    content: '';
    height: 4px;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    bottom: -12px;
    left: 48%;
    transform: translate(-50%);
    animation: underline 0.8s forwards ease;
  }

  @keyframes underline {
    from {
      width: 0;
    }
    to {
      width: 120px;
    }
  }

  .top_button {
    color: #666;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    display: inline-block;
    position: absolute;
    top: 36px;
    right: 64px;
  }

  .btItem, .btItemActive {
    cursor: pointer;
    position: relative;
  }

  .btItem {
    opacity: 0.5;
  }

  .btItemActive {
    opacity: 1;
  }

  .top_button .btItem + .btItem {
    margin-left: 40px;
  }

  .btItemActive::after {
    content: '';
    height: 4px;
    border-radius: 2px;
    background-color: #666;
    position: absolute;
    bottom: -12px;
    left: 48%;
    transform: translate(-50%);
    animation: underline2 0.8s forwards ease;
  }

  @keyframes underline2 {
    from {
      width: 0;
    }
    to {
      width: 66px;
    }
  }

  .canvas_comp_left {
    width: 160px;
    height: 160px;
    position: relative;
    left: 0;
    fill: currentColor; /* 让 color 属性可以改变 svg 的颜色 */
  }

  .rotate, .scale {
    width: 38px;
    height: 38px;
    border: 2px solid #666;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50px;
    color: #666;
    cursor: pointer;
    transition: .4s ;
  }

  .rotate_bg, .scale_bg {
    width: 0;
    height: 0;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .2s;
  }

  .canvas_comp_left svg {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  .rotate:hover, .scale:hover {
    color: #fff;
    border: 2px solid transparent;
  }

  .rotate:hover .rotate_svg {
    width: 20px;
    height: 20px;
  }

  .scale:hover .scale_svg {
    width: 24px;
    height: 24px;
  }

  .rotate:hover .rotate_bg, .scale:hover .scale_bg {
    width: 40px;
    height: 40px;
    background-color: #666;
  }

  .scale {
    top: 60px;
  }
</style>